<template>
  <div id="">
    <div class="banner">
    <swiper :options="swiperOption">
    <swiper-slide v-for="(items,index) in housePicList" :key="items.key">
    <!-- <img :src="items.housePic" alt="" @click="LargeImg()"> -->
    <div class="houseImg" @click="LargeImg()" :style="{backgroundImage:'url(' + items.housePic + ')'}">

    </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="jc"></div>
    </div>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'Vuex';
export default {
  name: "",
  props: ['housePicList'],
  data: () => ({
    swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type:'fraction'
        },
        autoplay:{
          delay: 3000,
        	disableOnInteraction: false,
        },
        paginationClickable: true,
        // loop: true,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
  }),
  methods: {
    ...mapMutations([
      'sethousePic',
      'setphoneBalbum',
      'setalbumIds',
    ]),
    LargeImg() {
      console.log('点击查看大图');
      let that = this;
      that.sethousePic(that.housePicList);
      that.$router.push({path:'/bigImg',query:{}});
    }
  },
  mounted() {
    //do something after mounting vue instance
    let that = this;

  }
}
</script>
<style lang="scss" scoped>
@import "@/main.scss";
.banner .swiper-pagination-bullet{background:white;}
.banner .swiper-pagination-bullet-active{background:$lightColor;}
.banner{
  padding: 0;
  text-align: right;
  .houseImg{
    width: 100%;
    height: 14rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
</style>
